<script type="text/javascript">
    var chart;
    $(document).ready(function() {
        $('#startPicker,#endPicker').datepick({
                    onSelect: customRange, dateFormat: 'yyyy-mm-dd'});

        function customRange(dates) {
            if (this.id == 'startPicker') {
                $('#endPicker').datepick('option', 'minDate', dates[0] || null);
            }
            else {
                $('#startPicker').datepick('option', 'maxDate', dates[0] || null);
            }
        }

        chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'line_basic',
                        defaultSeriesType: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: '{% autoescape off %}{{ startDate }} - {{ endDate }}{% endautoescape %}',
                        x: -20 //center
                    },
                    subtitle: {
                        text: '',
                        x: -20
                    },
                    xAxis: {
                        categories:{% autoescape off %}{{ dt }}{% endautoescape %}
                    },
                    yAxis: {
                        title: {
                            text: ''
                        },
                        plotLines: [
                            {
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }
                        ]
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>' + this.series.name + '</b><br/>' +
                                    this.x + ': ' + this.y;
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [
                        {
                            name: 'PV',
                            data: {{ pv_list }}
                        },
                        {
                            name: 'UV',
                            data: {{ uv_list }}
                        },
                        {
                            name: 'IP',
                            data: {{ ip_list }}
                        }
                    ]
                });
    });

</script>
<article class="module width_full">
    <div class="module_content">
        <article class="stats_graph">
            <div id="line_basic" style="width: 100%; height: 220px; margin: 0 auto"></div>
        </article>
        <div class="clearfix"></div>
    </div>
</article>